<template>
	<view class="container">
		<!-- 轮播图 -->
		<view class="home_swiper">
			<swiper autoplay indicator-dots circular>
				<swiper-item class="home_swiper_item" v-for="(item,index) in homeInfo.images" :key="index">
					<image class="img" :src="item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 通知 -->
		<view class="inform">
			<uni-notice-bar showIcon="true" speed="30" scrollable="true" single="true" :text="getNoticeInfo"></uni-notice-bar>
			<!-- ！欢迎使用适老化改造小程序 -->
		</view>

		<!-- 改造申请 -->
		<view class="apply">
			<text>{{homeInfo.hello}}</text>
			<button class="btn-hover color-2" @click="btnToApply">徐州适老化改造申请</button>
		</view>

		<!-- 改造服务 -->
		<view class="serve-all">
			<text>改造服务</text>
			<view class="serve">
				<navigator class="product" url="../serve/product">
					<image src="../../static/serve/product.png" mode="widthFix"></image>
					<text>产品中心</text>
				</navigator>
				<navigator class="institution" url="../serve/institution">
					<image src="../../static/serve/institution.png" mode="widthFix"></image>
					<text>案例展示</text>
				</navigator>
				<navigator class="dynamic" url="../serve/dynamic">
					<image src="../../static/serve/dynamic.png" mode="widthFix"></image>
					<text>动态信息</text>
				</navigator>
			</view>
		</view>

		<!-- 场景选择 -->
		<view class="scene-all">
			<text>场景选择</text>
			<view class="scene">
				<navigator v-for="(item,index) in sceneMenu" :key="index"
					:url="`homePage/place?id=${item.sceneMenuId}`">
					<image v-if="item.icon===1" src="../../static/place/bath.png" mode="widthFix"></image>
					<image v-else-if="item.icon===2" src="../../static/place/kitchen.png" mode="widthFix"></image>
					<image v-else-if="item.icon===3" src="../../static/place/bed.png" mode="widthFix"></image>
					<image v-else="item.icon===4" src="../../static/place/living.png" mode="widthFix"></image>
					<text>{{item.name}}</text>
				</navigator>
			</view>
		</view>

		<!-- 签名 -->
		<view class="sign">
			{{homeInfo.sign}}
		</view>
	</view>
</template>

<script>
	import {
		getHomeInfo,
		getSceneMenu,
		getNotice
	} from "@/common/request.js"

	export default {
		data() {
			return {
				homeInfo: {}, // 首页信息
				sceneMenu: [], // 场景菜单
				notice:[],    // 公告
			}
		},
		computed:{
			// 获取通告
			getNoticeInfo(){
				let arr=[]
				this.notice.forEach((it)=>{
					arr.push(it.content+"\t")
				})
				return arr
			}
		},
		methods: {
			// 跳转到改造申请
			btnToApply() {
				if(!this.$store.state.isLogin){
					uni.showToast({
						icon:"none",
						duration:1500,
						title:"请先登录"
					})
					return
				}
				console.log(this.$store.state.isLogin);
				uni.navigateTo({
					url: "../apply/Apply"
				})
			},
			getHomeMsg() {
				// 获取首页信息
				getHomeInfo().then(res => {
					this.homeInfo = res[0]
				})
				// 获取场景菜单
				getSceneMenu().then(res => {
					this.sceneMenu = res
				})
				getNotice().then(res=>{
					this.notice=res
				})
			}
		},
		created() {
			this.getHomeMsg()
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: $uni-color-homeBg;
		font-size: $uni-font-size-theme;

		/* 轮播图 */
		.home_swiper {
			swiper {
				height: 420rpx;

				.home_swiper_item {
					.img {
						height: 100%;
					}
				}
			}
		}

		/* 申请 */
		.apply {
			margin-top: 15rpx;
			@include home-margin;
			@include home-padding-in;

			.btn-hover {
				width: 90%;
				font-size: 35rpx;
				font-weight: 600;
				color: #fff;
				cursor: pointer;
				margin: 40rpx;
				height: 100rpx;
				text-align: center;
				border: none;
				background-size: 300% 100%;

				border-radius: 50px;
				moz-transition: all .4s ease-in-out;
				-o-transition: all .4s ease-in-out;
				-webkit-transition: all .4s ease-in-out;
				transition: all .4s ease-in-out;
			}

			.btn-hover:hover {
				background-position: 100% 0;
				moz-transition: all .4s ease-in-out;
				-o-transition: all .4s ease-in-out;
				-webkit-transition: all .4s ease-in-out;
				transition: all .4s ease-in-out;
			}

			.btn-hover:focus {
				outline: none;
			}

			.btn-hover.color-2 {
			    background-image: linear-gradient(to right, #fc6076, #ff9a44, #ef9d43, #e75516);
			       box-shadow: 0 4px 15px 0 rgba(252, 104, 110, 0.75);
			}
		}

		/* 通知 */
		.inform {
			// @include home-margin;
			// @include home-padding-in;
			margin-top: 25rpx;
			margin-left: 40rpx;
			margin-right: 40rpx;
		}

		/* 改造服务 */
		.serve-all {
			@include home-margin;
			@include home-padding-in;

			.serve {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-around;

				navigator {
					// text-align: center;

					image {
						width: 80rpx;
						margin-left: 20rpx;
						margin-bottom: 10rpx;
					}
				}
			}
		}

		/* 场景选择 */
		.scene-all {
			@include home-margin;
			margin-bottom: 0;
			@include home-padding-in;

			.scene {
				margin-top: 15rpx;
				display: flex;
				justify-content: space-around;

				navigator {
					text-align: center;

					image {
						width: 100rpx;
					}
				}
			}
		}

		/* 签名 */
		.sign {
			font-size: 26rpx;
			line-height: 100rpx;
			text-align: center;
			height: 100rpx;
		}
	}
</style>
